<template>
  <Card size="small" :bodyStyle="contentStyle">
    <template #title>
      <span style="margin-left: 6px">表信息列表</span>
      <span style="font-weight: normal; font-size: 12px; padding-left: 10px">合计：{{ filteredTables }}/{{ totalTables }}张表</span>
      <Row>
        <Input.Search allowClear v-model:value="searchKey" placeholder="输入表名称或描述信息进行过滤" @search="SearchTables" @clear="SearchTables" />
      </Row>
    </template>
    <div v-for="(item, index) in tables" :title="item.table_name + ' (' + item.table_comment + ')'" @click="changeTable(item)" class="bg-info" :class="selectedTable == item.table_name ? 'bg-success' : ''">
      <b>{{ index + 1 }}</b>
      <div>
        <h5>{{ item.table_name }}</h5>
        <div>
          <i>{{ item.table_comment || ' ' }}</i>
        </div>
      </div>
    </div>
  </Card>
</template>

<script setup>
  import { useStore } from 'vuex';
  import { ref, inject, toRaw, computed, watch } from 'vue';
  import { Card, Row, Input } from 'ant-design-vue';

  const $store = useStore();
  const $http = inject('$http');
  const $emits = defineEmits(['change']);

  const props = defineProps({
    dbIndex: { type: [String, Number], default: 0 },
    dbType: { type: String, default: '' },
    schema: { type: String, default: '' }
  });

  const searchKey = ref('');
  const tables = ref([]);
  const tempDatas = ref([]);
  const selectedTable = ref('');
  const totalTables = computed(() => tempDatas.value.length);
  const filteredTables = computed(() => tables.value.length);
  const contentStyle = computed(() => {
    let contentHeight = $store.state.area.content.height - 160 + 'px';

    return {
      'max-height': contentHeight,
      'min-height': contentHeight,
      'overflow-x': 'hidden',
      'overflow-y': 'auto',
      'padding': '5px'
    };
  });

  watch(
    () => props.schema,
    () => {
      GetTables();
    }
  );

  function SearchTables() {
    if (tempDatas.value.length) {
      let key = (searchKey.value || '').toUpperCase();

      if (key.trim()) {
        tables.value = tempDatas.value.filter(i => (i.table_name || '').toUpperCase().includes(key) || (i.table_comment || '').toUpperCase().includes(key));
      } else {
        tables.value = tempDatas.value;
      }

      if (tables.value.length > 0) {
        let activeTable = tables.value[0];

        selectedTable.value = activeTable.table_name;

        $emits('change', activeTable);
      }
    }
  }

  function ResetSearch() {
    searchKey.value = '';
    SearchTables();
  }

  function changeTable(table) {
    selectedTable.value = table.table_name;

    $emits('change', toRaw(table));
  }

  function GetTables() {
    $http.get(`/api/db/${props.dbIndex}/${props.schema}/tables`).then(res => {
      tables.value = tempDatas.value = res.datas;

      if (tables.value.length > 0) {
        selectedTable.value = res.datas[0].table_name;

        $emits('change', tables.value[0]);
      }
    });
  }
</script>

<style lang="less" scoped>
  .bg-info,
  .bg-success {
    margin-bottom: 5px;
    cursor: pointer;
    padding: 5px 10px;
    line-height: 1;
    border-radius: 5px;
    width: 100%;
    color: #333;
    user-select: none;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    border: 1px solid #ccc;
    text-shadow: 0 1px 0 #fff;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 1px 1px rgb(0 0 0 / 8%);
    background: linear-gradient(to bottom, #fff 0, #e0e0e0 100%);

    > b {
      width: 35px;
      font-size: 12px;
      font-weight: normal;
      text-align: center;
      line-height: 28px;
      color: #333;
      border-right: 1px solid #bbb;
    }

    > div {
      flex: 0 0 calc(100% - 40px);
      padding-left: 10px;
      display: inline-block;
      width: 100%;
      overflow: hidden;

      > h5 {
        font-size: 12px;
        font-weight: bold;
        padding-bottom: 0;
        display: inline-block;
        width: 100%;
        color: #333;
        white-space: nowrap;
        word-spacing: normal;
        word-break: break-all;
        text-overflow: ellipsis;
      }

      > i {
        color: #333;
        display: inline-block;
        width: 100%;
      }
    }
  }

  .bg-success {
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 20%);
    background-image: linear-gradient(to bottom, #337ab7 0, #2e6da4 100%);

    > b {
      color: #fff;
    }

    > div {
      > h5,
      > i {
        color: #fff;
      }
    }
  }
</style>
